@import  "../base/fn";
/* 1px hack */
.ui-border-b:before {
    border-bottom: 1px solid $bordercolor;
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-transform-origin: left bottom;
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform:scaleY(.5);
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        -webkit-transform:scaleY(.3333);
    }

}

.ui-border-t:before {
    border-top: 1px solid $bordercolor;
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform-origin: left top;
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform:scaleY(.5);
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        -webkit-transform:scaleY(.3333);
    }
}

.ui-border-l:before {
    border-left: 1px solid $bordercolor;
    content: '';
    display: block;
    bottom: 0;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform-origin: left top;
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform:scaleX(.5);
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        -webkit-transform:scaleX(.3333);
    }
}

.ui-border-r:before {
    border-right: 1px solid $bordercolor;
    content: '';
    display: block;
    bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform-origin: right top;
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform:scaleX(.5);
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        -webkit-transform:scaleX(.3333);
    }
}

.ui-border-t,.ui-border-l,.ui-border-b,.ui-border-r,.ui-border-tb {
    position: relative;
}

.ui-border-tb:before {
    border-top: 1px solid $bordercolor;
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform-origin: left top;
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform:scaleY(.5);
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        -webkit-transform:scaleY(.3333);
    }
}

.ui-border-tb:after {
    border-bottom: 1px solid $bordercolor;
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-transform-origin: left bottom;
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform:scaleY(.5);
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        -webkit-transform:scaleY(.3333);
    }
}
.ui-border:before {
    content:"";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid $bordercolor;
    -webkit-transform-origin: 0 0;
    padding: 1px;
    -webkit-box-sizing: border-box;
    pointer-events: none;
    z-index: $z-index-border;
    pointer-events: none;
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        width: 200%;
        height: 200%;
        -webkit-transform:scale(.5);
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        width: 300%;
        height: 300%;
        -webkit-transform:scale(.3333);
    }
}
.ui-border-radius{
    &:before{
        content:"";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid $bordercolor;
        -webkit-transform-origin: 0 0;
        padding: 1px;
        -webkit-box-sizing: border-box;
        border-radius: 4px;
        pointer-events: none;
        z-index: $z-index-border;
        @media screen and (-webkit-min-device-pixel-ratio: 2) {
            width: 200%;
            height: 200%;
            -webkit-transform:scale(.5);
            border-radius: 8px;
        }
        @media screen and (-webkit-min-device-pixel-ratio: 3) {
            width: 300%;
            height: 300%;
            -webkit-transform:scale(.3333);
            border-radius: 12px;
        }
    }

}
.ui-list > li.ui-border-t:first-child,
.ui-list > li:first-child  .ui-border-t,
.ui-list-active > li:active,
.ui-list > li.active,
.ui-list > li.active  .ui-border-t,
.ui-list > li.active + li .ui-border-t,
.ui-list > li.active + li.ui-border-t{
    &:before{
        content: none;
    }
}
